<template>
	<view>
		<view class="example">
			<u-form :model="model" ref="uForm" :errorType="errorType">
				<u-form-item
				        :rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
				        label="活动名称"
				        prop="promotionName"
						labelAlign="center"
				        label-width="200"
						>
					<u-input
					        placeholder="活动名称"
					        v-model="model.promotionName"
					        type="String"
					        maxlength="18"
					></u-input>
				</u-form-item>
				<u-form-item 
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="优惠券名称"
					prop="couponName"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					        placeholder="优惠券名称"
					        v-model="model.couponName"
					        type="String"
					        maxlength="18"
					></u-input>
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="优惠券类型"
					prop="couponType"
					labelAlign="center"
					label-width="200"
					>
					<view class="" style="width: 100%;" @click="isSelect">
						<!-- PRICE 减免现金    DISCOUNT 打折 -->
						{{model.couponType == 'PRICE'?'减免现金':'打折'}}  
					</view>
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
				</u-form-item>
				<u-form-item
					v-if="model.couponType == 'DISCOUNT'"
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="折扣"
					prop="price"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					        placeholder="折扣"
					        v-model="model.couponDiscount"
					        type="number"
					        maxlength="18"
					></u-input>
					<span class="" style="font-size: 11px;color: #999;">请输入0-10之间数字，可以输入一位小数</span>
				</u-form-item>
				<u-form-item
					v-if="model.couponType == 'PRICE'"
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="面额"
					prop="price"
					labelAlign="center"
					label-width="200"
					
					>
					<u-input
					        placeholder="面额"
					        v-model="model.price"
					        type="number"
					        maxlength="18"
					></u-input>
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="活动类型"
					prop="getType"
					labelAlign="center"
					label-width="200"
					>
					<view class="" style="width: 100%;" @click="isActivityShow">
						<!-- FREE 免费领取    ACTIVITY 活动赠送 -->
						{{model.getType == 'FREE'?'免费领取':'活动赠送'}}  
					</view>
					<u-select v-model="activityShow" mode="single-column" :list="activityType" @confirm="activityconfirm"></u-select>
				</u-form-item>
				
<!-- 				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="店铺承担比例"
					prop="sellerCommission"
					label-width="200"
					>
					<u-input
					style="width: 50vw;"
					        v-model="model.sellerCommission"
					        type="number"
					        maxlength="10"
					></u-input>
					<span>%</span>
				</u-form-item> -->
				<u-form-item
					v-if="model.getType == 'FREE'"
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="发放数量"
					prop="publishNum"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					        placeholder="发放数量"
					        v-model="model.publishNum"
					        type="number"
					        maxlength="18"
					></u-input>
					<span class="" style="font-size: 11px;color: #999;">如果发放数量为0时,则代表不限制发放数量</span>
				</u-form-item>
				<u-form-item
					v-if="model.getType == 'FREE'"
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="领取数量限制"
					prop="couponLimitNum"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					        placeholder="领取数量限制"
					        v-model="model.couponLimitNum"
					        type="number"
					        maxlength="18"
					></u-input>
					<span class="" style="font-size: 11px;color: #999;">如果领取限制为0时,则代表不限制领取数量</span>
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="范围描述"
					prop="description"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					style="height: 20vw;"
					        placeholder="范围描述"
					        v-model="model.description"
					        type="textarea "
					        maxlength="18"
					></u-input>
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="消费门槛"
					prop="consumeThreshold"
					labelAlign="center"
					label-width="200"
					>
					<u-input
					        placeholder="消费门槛"
					        v-model="model.consumeThreshold"
					        type="number"
					        maxlength="18"
					></u-input>
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="有效期"
					prop="rangeTime"
					labelAlign="center"
					label-width="200"
					>
					<view class="" style="display: flex;">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
						<view class="" style="padding: 0 20rpx;">
							至 
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
								<view class="uni-input">{{date1}}</view>
							</picker>
						</view>
					</view>
			
				</u-form-item>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="使用范围"
					prop="scopeType"
					labelAlign="center"
					label-width="200"
					>
					<view class="" >
						<view class=""style="display: flex;">
							<view :class="model.scopeType=='ALL'?'borderColor':'btnList'" @click="all">
								全品类
							</view>
							<view :class="model.scopeType=='PORTION_GOODS'?'borderColor':'btnList'" @click="portion">
								指定商品
							</view>
						</view>
					</view>
				</u-form-item>
				<view class="" v-if="model.scopeType=='PORTION_GOODS'">
					<view class="" style="display: flex;">
						<view class="btnleft" @click="isPopupShow">
							选择商品
						</view>
					<!-- 	<view class="btnrigth" @click="delItem('list')">
							批量删除
						</view> -->
					</view>
					<view class="">
						<view class="" style="display: flex;justify-content: space-around;">
							<!-- <view class="sel">
								<u-checkbox-group :icon-size="24" width="45rpx" :disabled="selectedList.length == 0">
									<u-checkbox shape="circle" v-model="allSel" @change="checkboxGroupChange" active-color="#FF5E00"></u-checkbox>
								</u-checkbox-group>
								全选
							</view> -->
							<view class="">
								<view class="">
									商品名称
								</view>
							</view>
							<view class="">
								<view class="">
										商品价格
								</view>
							</view>
							<view class="">
								<view class="">
										操作
								</view>
							</view>
						</view>
						<view class="" v-for="(item,index) of selectedList" :key="index" @click="checkGoods(item)" style="display: flex;margin: 3vw 0;">
						<!-- 	<view class="sel">
								<u-checkbox-group :icon-size="24" width="45rpx">
									<u-checkbox shape="circle" v-model="item.isDelete" active-color="#FF5E00"></u-checkbox>
								</u-checkbox-group>
							</view> -->
							<view class="itemLeft">
								<view class="" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
									{{item.goodsName}}
								</view>
							</view>
							<view class="itemText">
								<view class="">
									￥{{item.minPrice!=item.maxPrice ?item.minPrice + '~' + item.maxPrice : item.maxPrice}}
								</view>
							</view>
							<view class="itemBtn">
								<view class="delBtn" @click="delItem('item',item)">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>

			</u-form>
			<view class="" style="display: flex;justify-content: center;align-items: center;">
				<view class="submitBtn" @click="submitBtn">
					提交
				</view>
			</view>
			<u-popup v-model="popupShow"
			         :border-radius="10"
			         mode="center"
			         width="90%"
			>
			<scroll-view
			    class="list-scroll-content"
			    scroll-y
			    @scrolltolower="loadData"
			>
			<view class="search">
			  <u-search :height="86" shape="square" v-model="queryParams.goodsName" placeholder="商品名称" @custom="onSearchList"/>
			</view>
			    <view class="" style="height: 70vh;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;">
				   <view class="" v-for="item,index of goodsList" style="width: 50%;height: 25vw;position: relative;" @click="selt(item)">
				   	<view class="sell">
				   		<u-checkbox-group :icon-size="24" width="45rpx">
				   			<u-checkbox shape="circle" v-model="item.disabled" active-color="#FF5E00"></u-checkbox>
				   		</u-checkbox-group>
				   	</view>
					<view class=""  style="display: flex;margin-top: 15px;margin-left: 15px;">
						<view class="">
							<img :src="item.original" alt=""  class="imgView"/>
						</view>
						<view class="">
							<view class="" style="font-size: 12px;">
								{{item.goodsName}}
							</view>
							<view class="" style="font-size: 12px;">
								{{item.goodsUnit}}
							</view>
							<view class="" style="font-size: 12px;color: red;">
								￥{{item.minPrice!=item.maxPrice ?item.minPrice + '~' + item.maxPrice : item.maxPrice}}
							</view>
						</view>
					</view>
				   </view>
			    </view>
				 </scroll-view>
				<view class="" style="display: flex;justify-content: center;align-items: center;">
					<view class="subBtn" @click="selList">
						确认选择
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {selectGoodsListByStore, savePlatformCoupon,selectStoreCouponByCouponId,updateStoreCoupon} from "@/api/store"
	export default {
		data() {
			  const currentDate = this.getDate({
			            format: true
			        })
			return {
				// 基础表单数据
				model: {
					promotionName: '', //活动名称
					couponName: '', //优惠券名称
					couponType: 'PRICE', //优惠券类型
					couponDiscount:0, //折扣
					price: 0, //面额
					getType: 'FREE', //活动类型
					publishNum: 0,//发放数量
					consumeThreshold: '', //消费门槛
					couponLimitNum: 0, //领取限制
					rangeTime: '', //有效期
					startTime: null, //开始时间
					endTime: null, //结束时间
					scopeType: 'ALL', //使用范围   ALL全品类     PORTION_GOODS指定商品
					description: '', //范围描述
					promotionGoodsList:[],
					// sellerCommission:0,//店铺承担比例
					rangeDayType: "FIXEDTIME",
					goodsIds:[]
				},
				queryParams: {
				    pageSize: 10,
				    pageNumber: 1,
				    goodsName: "",
					marketEnable:'UPPER'
				},
				date: currentDate,
				date1: currentDate,
				errorType: ["message"],
				show:false,
				list: [
					{
						value: 'PRICE',
						label: '减免现金'
					},
					{
						value: 'DISCOUNT',
						label: '打折'
					}
				],
				//活动类型
				activityShow:false,
				activityType: [
					{
						value: 'FREE',
						label: '免费领取'
					},
					{
						value: 'ACTIVITY',
						label: '活动赠送'
					}
				],
				allSel:false,
				popupShow:false,
				goodsList:[],
				selectedList:[],
				subType:''
			}
		},
		onLoad(option) {
			console.log(option,'')
			if(option.id){
				this.queryParams.pageNumber=1
				this.subType = option.type
				this.getItemData(option.id)
				this.getGoodsList()
			}else{
				this.queryParams.pageNumber=1
				this.getGoodsList()
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			loadData() {  //下拉的数据刷新方法
			    this.queryParams.pageNumber++;
			    setTimeout(() => {
			      this.getGoodsList()
			    }, 500)
			},
			
			getGoodsList() {
			    selectGoodsListByStore(this.queryParams).then(res => {
			        if (res.data.success) {
						let arr = res.data.result.records
						for(let item of arr){
								item.disabled = false
						}
						this.goodsList = this.goodsList.concat(arr);
					console.log(arr)
			        }
			    })
			},
			
			getItemData(id) {
			    selectStoreCouponByCouponId(id).then(res => {
			        if (res.data.success) {
						this.model = res.data.result
						this.date = res.data.result.startTime.substr(0,10)
						this.date1 = res.data.result.endTime.substr(0,10)
			        }
			    })
			},
			
			updateStore() {
			    updateStoreCoupon(this.model).then(res => {
			        if (res.data.success) {
						uni.navigateBack({
							delta: 1
						});
			        }
			    })
			},
			
			isSelect(){
				this.show = true
			},
			
			confirm(e) {
				this.model.couponType = e[0].value
				console.log(this.model);
			},
			
			isActivityShow(){
				this.activityShow = true
			},
			
			activityconfirm(e) {
				this.model.getType = e[0].value
				console.log(this.model);
			},
			
			  getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			bindDateChange: function(e) {
				this.date = e.detail.value
				console.log(e, 'this.date')
			},
			
			bindDateChange1: function(e) {
				this.date1 = e.detail.value
			},
			
			all(){
				
				this.model.scopeType = 'ALL'
			},
			
			portion(){
				this.model.scopeType = 'PORTION_GOODS'
			},
			
			isPopupShow(){
				this.popupShow = true
			},
			
			onSearchList(e){
				this.queryParams.pageNumber=1
				this.queryParams.goodsName = e
				this.goodsList = []
				this.getGoodsList()
			},
			
			checkboxGroupChange(e){
				 for(let item of this.selectedList){
					 item.isDelete = !e.value
				 }
			},
			
			selt(item){
				item.disabled = !item.disabled
			},
			
			selList(){
				let arr = []
				let arr1 = []
				for(let item of this.goodsList){
					if(item.disabled){
						item.isDelete = false
						arr.push(item)
						arr1.push(item.id)
					}
				}
				this.selectedList = arr
				this.model.goodsIds = String(arr1)
				this.popupShow = false
			},
			
			checkGoods(item){
				console.log(item)
				item.isDelete = !item.isDelete
			},
			
			delItem(type,i){
				if(type == 'item'){
					let arr = []
					for(let item of this.selectedList){
						if(item.id == i.id){
							this.selectedList.splice(item,1)
						}
					}
					for(let item of this.selectedList){
							arr.push(item.id)
					}
					this.model.goodsIds = String(arr)
				}
				if(type == 'list'){
					for(let item of this.selectedList){
						if(item.isDelete){
							this.selectedList.splice(item,1)
						}
					}
				}
			},
			
			submitBtn(){
				this.model.startTime =  this.date;
				this.model.endTime = this.date1;
				
				console.log(this.model, 'this.model')
				if(this.subType == 'updata'){
					this.updateStore()
				}else{
					savePlatformCoupon(this.model).then(res => {
					    if (res.data.success) {
							uni.navigateBack({
								delta: 1
							});
					    }
					})
				}
				
			}
			
		}
	}
</script>

<style>
	.btnList{
		width: 20vw;
		border: 1px solid #999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.borderColor{
		width: 20vw;
		border: 1px solid;
		display: flex;
		justify-content: center;
		align-items: center;
		border-color: red;
		color: red;
	}
	.btnleft{
		width: 20vw;
		border: 1px solid;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		padding: 1vw;
		margin: 0 2vw;
		color: #fff;
		background-color: #ff5c58;
		border-color: #ff5c58;
	}
	.btnrigth{
		width: 20vw;
		border: 1px solid #ff5c58;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		padding: 1vw;
		color: #ff5c58;
	}
	.search {
	  display: flex;
	  margin: 10rpx 20rpx 30rpx !important;
	  margin-top: 10rpx;
	}
	.imgView{
		width: 15vw;
		height: 15vw;
		object-fit: fill;
	}
	.sell{
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.subBtn{
		background: red;
		padding: 3vw 7vw;
		border-radius: 8px;
		color: #FFF;
	}
	.submitBtn{
		width: 30vw;
		height: 10vw;
		background: red;
		border-radius: 31px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
	}
	.delBtn{
		    border: 1px solid red;
		    padding: 4px;
		    border-radius: 5px;
		    color: red;
	}
	.itemLeft{
		width: 40vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.itemText{
		width: 28vw;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.itemBtn{
		margin-left: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
